<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Brick property</title>
        <meta name="description" content="" />

        <meta name="twitter:title" content="" />
        <meta name="twitter:description" content="" />

        <!-- Open Graph / Facebook -->
        <meta property="og:title" content="Title of the project" />
        <meta property="og:description" content="" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://github.com/PaulleDemon" />
        <!--Replace with the current website url-->
        <meta property="og:image" content="" />

        <link
            rel="shortcut icon"
            href="./assets/logo.png"
            type="image/x-icon"
        />
        <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
        />

        <!-- <link rel="stylesheet" href="../../tailwind-css/tailwind-runtime.css"> -->
        <link rel="stylesheet" href="./css/tailwind-build.css" />
        <link rel="stylesheet" href="./css/index.css" />

        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css"
            integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />
    </head>

    <body
        class="tw-flex tw-min-h-[100vh] tw-w-full tw-flex-col tw-bg-[#ffffff]"
    >
        <header
            class="tw-fixed tw-top-0 tw-z-20 tw-flex tw-h-[60px] tw-w-full tw-px-[10%] max-lg:tw-mr-auto lg:tw-justify-around"
        >
            <div
                class="tw-absolute tw-left-0 tw-top-0 tw-z-[-1] tw-h-0 tw-w-full tw-bg-white tw-shadow-md"
                id="expanding-header-bg"
            >
                <!-- expands the white background as scroll -->
            </div>

            <div class="tw-flex tw-w-max tw-place-items-center tw-gap-3">
                <!-- <img src="./assets/public accountant.jpg"
                alt="Stroemer logo" class="tw-w-full tw-h-full tw-object"> -->
                <div class="tw-h-[50px] tw-w-[50px] tw-p-[4px]">
                    <img
                        src="./assets/logo.png"
                        alt="logo"
                        class="tw-object tw-h-full tw-w-full"
                    />
                </div>
            </div>
            <div
                class="collapsible-header animated-collapse"
                id="collapsed-items"
            >
                <div
                    class="tw-flex tw-h-full tw-w-max tw-gap-5 tw-text-base tw-text-white max-lg:tw-mt-[30px] max-lg:tw-flex-col max-lg:tw-place-items-end max-lg:tw-gap-5 lg:tw-mx-auto lg:tw-place-items-center"
                >
                    <a class="header-links" href=""> About us </a>
                    <a class="header-links" href=""> Team </a>
                    <a class="header-links" href=""> Projects </a>
                    <a class="header-links" href="#booking"> Contact us </a>
                </div>
                <div
                    class="tw-flex tw-place-items-center tw-gap-[20px] tw-text-xl max-lg:tw-w-full max-lg:tw-place-content-center max-lg:!tw-text-white"
                >
                    <a
                        href="https://www.instagram.com/"
                        target="_blank"
                        rel="no-referrer"
                        area-label="instagram"
                        class="header-links tw-transition-colors tw-duration-[0.3s]"
                    >
                        <i class="bi bi-instagram"></i>
                    </a>
                    <a
                        href="https://twitter.com/pauls_freeman"
                        target="_blank"
                        rel="no-referrer"
                        area-label="twitter"
                        class="header-links tw-transition-colors tw-duration-[0.3s]"
                    >
                        <i class="bi bi-twitter"></i>
                    </a>
                    <a
                        href="https://www.facebook.com/"
                        target="_blank"
                        rel="no-referrer"
                        area-label="facebook"
                        class="header-links tw-transition-colors tw-duration-[0.3s]"
                    >
                        <i class="bi bi-facebook"></i>
                    </a>
                </div>
            </div>
            <button
                class="bi bi-list tw-absolute tw-right-3 tw-top-3 tw-z-50 tw-text-3xl lg:tw-hidden"
                onclick="toggleHeader()"
                aria-label="menu"
                id="collapse-btn"
            >
                <!-- <i class="bi bi-list"></i> -->
            </button>
        </header>

        <section
            class="tw-relative tw-flex tw-h-[100vh] tw-w-full tw-max-w-[100vw] tw-flex-col tw-overflow-hidden max-lg:tw-h-[100dvh]"
            id="hero-section"
        >
            <img
                src="./assets/images/homepage/hero-image.jpg"
                alt=""
                class="tw-h-full tw-w-full tw-scale-[1.3] tw-object-cover"
                id="hero-image"
            />
            <div
                class="overlay-gradient tw-absolute tw-top-0 tw-h-full tw-w-full max-lg:tw-z-[2] max-lg:!tw-bg-[#1c1c1ca2]"
            ></div>

            <!-- <div class="tw-absolute tw-bottom-0 
                    tw-right-[10%] max-lg:tw-z-0
                    tw-h-[750px]
                    tw-max-w-[450px]
                    max-md:tw-hidden
                    ">
            <img src="./assets/images/homepage/lawyer.png" 
                alt="law" 
                class="tw-object-cover tw-h-full tw-w-full
                        ">
        </div> -->

            <div
                class="tw-absolute tw-left-[15%] tw-top-[50%] tw-z-[5] tw-flex tw-min-w-[320px] tw-max-w-[500px] tw-translate-y-[-50%] tw-flex-col tw-gap-4 tw-p-2 tw-text-white max-md:tw-left-[50%] max-md:tw-translate-x-[-50%] max-md:tw-place-content-center max-md:tw-place-items-center"
            >
                <h1
                    class="khula-font tw-text-xl tw-font-semibold max-md:tw-text-center max-md:tw-text-base"
                >
                    Real estate . Property investment . Rentals
                </h1>

                <h2
                    class="khula-font tw-text-6xl tw-font-bold tw-uppercase max-md:tw-text-4xl"
                >
                    Brick property investment
                    <!-- <br class="max-md:tw-hidden">     -->
                </h2>
                <span
                    class="tw-mt-2 tw-w-full tw-text-justify tw-text-lg max-md:tw-text-base"
                >
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. At
                    dolores sapiente, ipsa delectus ut consequuntur molestias
                    earum libero aut quasi?
                </span>
                <div
                    class="tw-mt-3 tw-flex tw-w-full tw-gap-[2%] max-md:tw-flex-col max-md:tw-gap-4"
                >
                    <a
                        href=""
                        target="_blank"
                        rel="noreferrer"
                        class="tw-flex tw-max-h-[50px] tw-min-w-[180px] tw-place-content-center tw-place-items-center tw-gap-2 tw-bg-white tw-p-3 tw-px-[20px] tw-text-black tw-transition-colors tw-duration-[0.3s] hover:tw-bg-[#100f0f] hover:tw-text-[#fff] max-md:tw-min-w-[100px]"
                    >
                        <span>Watch video</span>
                        <i class="bi bi-camera-video-fill"></i>
                    </a>

                    <a
                        href="#booking"
                        class="tw-flex tw-w-full tw-place-content-center tw-place-items-center tw-gap-2 tw-bg-[#000] tw-p-3 tw-text-[#fff] tw-transition-transform tw-duration-[0.3s] hover:tw-translate-x-1"
                    >
                        <span>Contact us</span>
                        <i class="bi bi-telephone-fill"></i>
                    </a>
                </div>
            </div>
        </section>

        <section
            class="tw-flex tw-min-h-[60vh] tw-w-full tw-place-content-center tw-place-items-center tw-gap-[10%] tw-bg-[#fff] tw-p-4 tw-px-[20%] max-lg:tw-flex-col max-lg:tw-gap-[4%] max-lg:tw-px-[5%]"
        >
            <div
                class="tw-flex tw-h-[350px] tw-w-[350px] tw-overflow-hidden tw-rounded-md max-md:tw-mt-[5%] max-md:tw-h-[300px] max-md:tw-w-[300px]"
            >
                <img
                    src="./assets/images/homepage/top-view.jpg"
                    alt=""
                    class="tw-w-full tw-object-cover"
                />
            </div>
            <div
                class="tw-flex tw-h-full tw-flex-col tw-gap-[5%] max-lg:tw-mt-4 max-lg:tw-gap-[3%] max-lg:tw-text-center"
            >
                <h2
                    class="primary-text-color tw-text-5xl tw-font-medium tw-uppercase max-md:tw-text-3xl"
                >
                    Brick property
                </h2>
                <div class="tw-mt-6 tw-max-w-[450px] tw-text-justify">
                    Welcome to Brick Property Investment, your premier
                    destination for all things real estate, property investment,
                    and rentals. Our dedicated team offers expert guidance and
                    personalized solutions to help you navigate the intricate
                    world of property investment. Whether you're looking to
                    diversify your portfolio, find your dream home, or secure
                    lucrative rental opportunities, trust Brick to deliver
                    tailored strategies that meet your unique needs. Experience
                    the difference with Brick Property Investment and unlock the
                    full potential of your real estate ventures.
                </div>
            </div>
            <div></div>
        </section>

        <section
            class="tw-flex tw-min-h-[60vh] tw-w-full tw-flex-col tw-place-items-center tw-gap-[10%] tw-bg-[#000] tw-p-8 tw-px-[20%] max-md:tw-h-max max-md:tw-min-h-[unset] max-md:tw-gap-[4%] max-md:tw-px-[5%]"
        >
            <h2
                class="tw-text-4xl tw-font-semibold tw-text-white max-md:tw-text-2xl"
            >
                Discover properties
            </h2>
            <!-- <h2 class="tw-text-5xl max-md:tw-text-3xl primary-text-color tw-text-center"></h2> -->

            <div
                class="tw-mt-[5%] tw-flex tw-w-full tw-place-content-center tw-place-items-center tw-justify-around tw-gap-[10%] max-lg:tw-mt-4 max-lg:tw-flex-col max-lg:tw-gap-5 max-md:tw-mt-8"
            >
                <div
                    class="tw-flex tw-w-full tw-flex-wrap tw-justify-around tw-gap-3 tw-rounded-sm tw-border-2 tw-border-solid tw-border-[#cccbcba0] tw-p-2"
                >
                    <input
                        type="text"
                        class="input-light"
                        placeholder="City, area or street name"
                        id=""
                    />

                    <div class="tw-flex tw-w-[200px] tw-flex-col tw-gap-1">
                        <div class="dropdown input-light" id="dropdown1">
                            <button class="dropdown-toggle tw-flex tw-gap-5">
                                <span>Home type</span>
                                <i class="bi bi-chevron-down tw-ml-auto"></i>
                            </button>
                            <ul class="dropdown-menu">
                                <li>House</li>
                                <li>Condo</li>
                                <li>Townhome</li>
                                <li>Apartment</li>
                                <li>Commercial</li>
                            </ul>
                        </div>
                    </div>

                    <div class="tw-flex tw-w-[200px] tw-flex-col tw-gap-1">
                        <div class="dropdown input-light" id="dropdown2">
                            <button class="dropdown-toggle tw-flex tw-gap-5">
                                <span>Bedrooms</span>
                                <i class="bi bi-chevron-down tw-ml-auto"></i>
                            </button>
                            <ul class="dropdown-menu">
                                <li>Any</li>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4+</li>
                            </ul>
                        </div>
                    </div>
                    <div class="tw-flex tw-w-[200px] tw-flex-col tw-gap-1">
                        <div class="dropdown input-light" id="dropdown3">
                            <button class="dropdown-toggle tw-flex tw-gap-5">
                                <span>Bathrooms</span>
                                <i class="bi bi-chevron-down tw-ml-auto"></i>
                            </button>
                            <ul class="dropdown-menu">
                                <li>Any</li>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4+</li>
                            </ul>
                        </div>
                    </div>
                    <div class="tw-flex tw-w-[200px] tw-flex-col tw-gap-1">
                        <div class="dropdown input-light" id="dropdown4">
                            <button class="dropdown-toggle tw-flex tw-gap-5">
                                <span>Min price</span>
                                <i class="bi bi-chevron-down tw-ml-auto"></i>
                            </button>
                            <ul class="dropdown-menu">
                                <li>Any</li>
                                <li>$50,000</li>
                                <li>$100,000</li>
                                <li>$200,000</li>
                                <li>$200,000</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div
                class="tw-mt-[5%] tw-flex tw-w-full tw-flex-wrap tw-place-content-center tw-place-items-center tw-justify-around tw-gap-8 max-lg:tw-mt-4 max-lg:tw-flex-col max-lg:tw-gap-5 max-md:tw-mt-8"
            >
                <a
                    class="tw-flex tw-h-[350px] tw-w-[350px] tw-cursor-pointer tw-flex-col tw-place-items-center tw-gap-4 tw-overflow-hidden tw-bg-[#fff] tw-text-black tw-shadow-lg"
                    target="_blank"
                    rel="noreferrer"
                    href=""
                >
                    <div class="tw-relative tw-h-[280px] tw-w-full tw-bg-white">
                        <img
                            src="./assets/images/homepage/property.jpg"
                            alt=""
                            class="tw-h-full tw-w-full tw-object-cover"
                        />

                        <div
                            class="tw-flex tw-flex-col tw-gap-1 tw-p-4 tw-text-center"
                        >
                            <h3 class="tw-text-lg tw-font-semibold">Rental</h3>
                            <h4 class="tw-text-sm tw-text-[#595858]">
                                $2000 PM
                            </h4>
                        </div>
                    </div>
                </a>

                <a
                    class="tw-flex tw-h-[350px] tw-w-[350px] tw-cursor-pointer tw-flex-col tw-place-items-center tw-gap-4 tw-overflow-hidden tw-bg-[#fff] tw-text-black tw-shadow-lg"
                    target="_blank"
                    rel="noreferrer"
                    href=""
                >
                    <div class="tw-relative tw-h-[280px] tw-w-full tw-bg-white">
                        <img
                            src="./assets/images/homepage/apartment.jpg"
                            alt=""
                            class="tw-h-full tw-w-full tw-object-cover"
                        />

                        <div
                            class="tw-flex tw-flex-col tw-gap-1 tw-p-4 tw-text-center"
                        >
                            <h3 class="tw-text-lg tw-font-semibold">
                                Apartment Sale
                            </h3>
                            <h4 class="tw-text-sm tw-text-[#595858]">
                                $250,000
                            </h4>
                        </div>
                    </div>
                </a>

                <a
                    class="tw-flex tw-h-[350px] tw-w-[350px] tw-cursor-pointer tw-flex-col tw-place-items-center tw-gap-4 tw-overflow-hidden tw-bg-[#fff] tw-text-black tw-shadow-lg"
                    target="_blank"
                    rel="noreferrer"
                    href=""
                >
                    <div class="tw-relative tw-h-[280px] tw-w-full tw-bg-white">
                        <img
                            src="./assets/images/homepage/house.jpg"
                            alt=""
                            class="tw-h-full tw-w-full tw-object-cover"
                        />

                        <div
                            class="tw-flex tw-flex-col tw-gap-1 tw-p-4 tw-text-center"
                        >
                            <h3 class="tw-text-lg tw-font-semibold">
                                Home Sale
                            </h3>
                            <h4 class="tw-text-sm tw-text-[#595858]">
                                $750,000
                            </h4>
                        </div>
                    </div>
                </a>
            </div>

            <a
                href=""
                target="_blank"
                rel="noreferrer"
                class="tw-mt-[5%] tw-flex tw-gap-2 tw-bg-[#fff] tw-p-3 tw-px-[20px] tw-text-[#181a18fd] tw-transition-transform tw-duration-[0.3s] hover:tw-translate-x-1 max-md:tw-p-2"
            >
                <span>Explore more</span>
                <i class="bi bi-arrow-right"></i>
            </a>
        </section>

        <section
            class="tw-flex tw-w-full tw-place-content-center tw-place-items-center tw-gap-[10%] tw-overflow-hidden tw-bg-[#EFEFEF] tw-p-4 max-md:tw-flex-col max-md:tw-px-2 lg:tw-px-[10%]"
            id="booking"
        >
            <div
                class="tw-flex tw-h-[350px] tw-w-[350px] tw-overflow-hidden max-md:tw-hidden"
            >
                <img
                    src="./assets/images/homepage/top-view.jpg"
                    alt=""
                    class="tw-w-full tw-object-cover"
                />
            </div>
            <div class="tw-mt-[5%] tw-flex tw-h-full tw-flex-col tw-gap-[5%]">
                <div class="mxa-md:tw-text-center tw-flex tw-flex-col tw-gap-2">
                    <h2 class="tw-text-3xl tw-font-medium max-md:tw-text-xl">
                        Get free quote
                    </h2>
                    <h2
                        class="primary-text-color tw-text-5xl tw-font-medium max-md:tw-text-3xl"
                    >
                        Contact us
                    </h2>
                </div>
                <form
                    class="tw-mt-4 tw-flex tw-max-w-[450px] tw-flex-col tw-place-content-center tw-gap-3 tw-p-2 max-md:tw-max-w-[350px]"
                >
                    <div
                        class="tw-flex tw-w-[450px] tw-flex-col tw-gap-4 max-md:tw-w-[340px]"
                    >
                        <div class="tw-flex tw-flex-col tw-gap-1">
                            <div class="tw-text-gray-500">Name</div>
                            <input
                                type="text"
                                class="input"
                                maxlength="10"
                                required
                                placeholder="name"
                            />
                        </div>
                        <div class="tw-flex tw-flex-col tw-gap-1">
                            <div class="tw-text-gray-500">Phone</div>
                            <input
                                type="text"
                                class="input"
                                required
                                placeholder="phone"
                            />
                        </div>
                        <div class="tw-flex tw-flex-col tw-gap-1">
                            <div class="tw-text-gray-500">Email</div>
                            <input
                                type="email"
                                class="input"
                                required
                                placeholder="email"
                                id="email"
                            />
                        </div>

                        <div class="tw-flex tw-w-full tw-flex-col tw-gap-2">
                            <div class="tw-text-gray-500">Enquiry</div>
                            <textarea
                                class="input tw-max-h-[250px] tw-min-h-[40px] tw-w-full tw-resize-y"
                                placeholder="enquiry"
                            ></textarea>
                        </div>
                    </div>

                    <button
                        type="submit"
                        class="btn tw-ml-auto tw-mt-5 tw-transition-transform tw-duration-[0.3s] hover:tw-translate-x-2"
                    >
                        <span>Submit</span>
                        <i class="bi bi-arrow-right"></i>
                    </button>
                </form>

                <div
                    class="tw-mt-4 tw-flex tw-flex-col tw-gap-2 tw-text-center"
                >
                    <h3 class="tw-text-xl">Call</h3>

                    <div class="primary-text-color tw-text-3xl">
                        +61 123-123-123
                    </div>
                </div>
            </div>
        </section>

        <section
            class="tw-mt-5 tw-flex tw-w-full tw-flex-col tw-place-items-center tw-p-[5%]"
        >
            <h3
                class="primary-text-color tw-text-3xl tw-font-medium max-md:tw-text-2xl"
            >
                What some of our clients say
            </h3>

            <div
                class="tw-mt-[5%] tw-flex tw-w-full tw-place-content-center tw-gap-[5%]"
            >
                <div class="review-container tw-flex tw-flex-col">
                    <div
                        class="tw-flex tw-h-[150px] tw-max-w-[550px] max-md:tw-h-[150px]"
                    >
                        <div class="slides fade tw-text-justify tw-text-lg">
                            <q class="tw-italic tw-text-gray-600">
                                One of the best property management around.
                                Absolutely recommended!!
                            </q>
                            <div class="tw-mt-2 tw-text-yellow-400">
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                            </div>
                            <p class="tw-mt-3">- Rob Wilson</p>
                        </div>

                        <div class="slides fade tw-text-justify tw-text-lg">
                            <q class="tw-italic tw-text-gray-600">
                                Amazing, got the contract ready very quickly and
                                was able to move in on time.
                            </q>
                            <div class="tw-mt-2 tw-text-yellow-400">
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                            </div>
                            <p class="tw-mt-3">- Tania</p>
                        </div>

                        <div class="slides fade tw-text-justify tw-text-lg">
                            <q class="tw-italic tw-text-gray-600">
                                Very happy with how they handled and managed
                                property
                            </q>
                            <div class="tw-mt-2 tw-text-yellow-400">
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                            </div>
                            <p class="tw-mt-3">- Nick Surace</p>
                        </div>
                    </div>

                    <!-- Navigation dots -->
                    <div class="dots-container tw-mt-auto">
                        <span class="dot"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                    </div>
                </div>
            </div>
            <div
                class="tw-mt-[5%] tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-5"
            >
                <h2 class="primary-text-color tw-text-3xl">On the map</h2>
                <iframe
                    src="https://www.google.com/maps/embed"
                    class="tw-h-[350px] tw-w-[600px] max-md:tw-w-full"
                    style="border: 0"
                    allowfullscreen=""
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"
                ></iframe>
            </div>
        </section>

        <section
            class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-[10%] tw-bg-[#EFEFEF] tw-p-[5%] tw-px-[10%]"
        >
            <div
                class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-3"
            >
                <h2 class="primary-text-color tw-text-3xl max-md:tw-text-xl">
                    Special Newsletter signup
                </h2>
                <h2 class="tw-text-xl max-md:tw-text-lg">
                    Be the first to know about upcoming properties
                </h2>

                <div
                    class="input tw-flex tw-h-[50px] tw-place-items-center tw-overflow-hidden tw-bg-white tw-p-2"
                >
                    <input
                        type="email"
                        class="tw-h-full tw-w-full tw-bg-transparent tw-px-3 tw-outline-none"
                        placeholder="email"
                    />
                    <button
                        class="btn tw-h-[35px] tw-transition-colors tw-duration-[0.3s]"
                    >
                        Signup
                    </button>
                </div>
            </div>
        </section>

        <footer
            class="tw-flex tw-w-full tw-place-content-around tw-gap-3 tw-bg-[#000] tw-p-[5%] tw-px-[10%] tw-text-white max-lg:tw-flex-col"
        >
            <div
                class="tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-place-items-center tw-gap-6 max-md:tw-w-full"
            >
                <img
                    src="./assets/logo.png"
                    alt="logo"
                    srcset=""
                    class="tw-max-h-[100px] tw-max-w-[100px]"
                />

                <h2 class="tw-text-xl">Brick property</h2>
                <div>
                    unit 17/4 station Street,
                    <br />
                    Fairfield,
                    <br />
                    Sydney,
                    <br />
                    Australia
                </div>
                <div class="tw-mt-3 tw-text-lg tw-font-semibold">Follow us</div>
                <div class="tw-flex tw-gap-4 tw-text-2xl">
                    <a href="" aria-label="Facebook">
                        <i class="bi bi-facebook"></i>
                    </a>
                    <a
                        href="https://twitter.com/pauls_freeman"
                        aria-label="Twitter"
                    >
                        <i class="bi bi-twitter"></i>
                    </a>
                    <a
                        href="https://twitter.com/pauls_freeman"
                        aria-label="Twitter"
                    >
                        <i class="bi bi-linkedin"></i>
                    </a>
                </div>
            </div>

            <div class="tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-gap-4">
                <h2 class="tw-text-3xl max-md:tw-text-xl">Services</h2>
                <div class="tw-flex tw-flex-col tw-gap-3 max-md:tw-text-sm">
                    <a href="" class="footer-link">Properties</a>
                    <a href="" class="footer-link">Home worth estimate </a>
                    <a href="" class="footer-link">Buyer's consult</a>
                    <a href="" class="footer-link">Listing</a>
                </div>
            </div>

            <div class="tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-gap-4">
                <h2 class="tw-text-3xl max-md:tw-text-xl">Resources</h2>
                <div class="tw-flex tw-flex-col tw-gap-3 max-md:tw-text-sm">
                    <a href="" class="footer-link">About us</a>
                    <a href="" class="footer-link">FAQ</a>
                    <a href="" class="footer-link">Contact Us</a>
                    <a href="" class="footer-link">Locations</a>
                    <a href="" class="footer-link">Privacy policy</a>
                </div>
            </div>
        </footer>
    </body>

    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"
        integrity="sha512-H6cPm97FAsgIKmlBA4s774vqoN24V5gSQL4yBTDOY2su2DeXZVhQPxFK4P6GPdnZqM9fg1G3cMv5wD7e6cFLZQ=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"
    ></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"
        integrity="sha512-5efjkDjhldlK+BrHauVYJpbjKrtNemLZksZWxd6Wdxvm06dceqWGLLNjZywOkvW7BF032ktHRMUOarbK9d60bg=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"
    ></script>

    <script src="./scripts/utils.js"></script>
    <script src="index.js"></script>
</html>
